<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./12.19.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <link rel="stylesheet" href="./swiper-bundle.js">
    <script src="./swiper-bundle.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script src="./12.19.js"></script>
    <script src="https://www.makeapie.cn/dep/echarts/map/js/china.js"></script>
</head>
<style>
    
*{
    margin: 0;padding: 0;
}
.clear{ clear:both; height:0; width:0; overflow:hidden;} 
.box{width: 1200px;
height: 110px;
background: #fff;
margin: auto;
}
ul li{float: left;line-height: 106px;font-size: 15px;padding-left: 30px; list-style:none;}
.tab{
    width:500px;
    height:45px;
    background: #fafafa;
    position:relative;
    margin:100px auto;
}
.tab_list li:hover{
    border-bottom: solid lawngreen 4px;
    width:80px;
    height:45px;
    list-style:none;
    line-height:45px;
    text-align: center;
    float:left;
}
.tab_list li{
    width:80px;
    height:45px;
    list-style:none;
    line-height:45px;
    text-align: center;
    float:left;
}
.item{
    width:500px;
    height: 200px;
    padding-top:40px; 
    font-size: 30px;
    color:#fff;
    text-align: center;
    top:47px;
    position:absolute;
}

</style>
<body>
   <div class="box">
    <ul>
        <li><img src="./img/7.png"width="260px"  alt=""></li>
        <li>首页</li>
        <li>关于我们</li>
        <li>新闻中心</li>
        <li>党建时空</li>
        <li>产品服务</li>
        <li>社会责任</li>
        <li>企业变化</li>
        <li><img src="./img/12.png" width="260px
            " alt=""></li>
    </ul>
   </div>
   <div style="width: 1200px;margin: auto;"
   class="swiper mySwiper swiper-initialized swiper-horizontal swiper-pointer-events swiper-css-mode">
   <div class="swiper-wrapper" id="swiper-wrapper-ef27d4fa61cece910" aria-live="polite">
       <div class="swiper-slide" role="group" aria-label="1/ 4" style="width: 1000px;">
           <img src="http://www.chinapost.com.cn/res/ChinaPostJT/page/220580430.png"
               width="100%" alt="">
       </div>
       <div class="swiper-slide" role="group" aria-label="2 /6" style="width: 100%;">
           <img src="http://www.chinapost.com.cn/res/ChinaPostJT/page/22111563.jpg"
               width="100%" alt="">
       </div>
       <div class="swiper-slide" role="group" aria-label="3 / 4" style="width: 100%;">
           <img src="http://www.chinapost.com.cn/res/ChinaPostJT/page/22117344.jpg"
               width="100%" lt="">
       </div>
       <div class="swiper-slide" role="group" aria-label="4 / 4" style="width: 100%;">
           <img src="http://www.chinapost.com.cn/res/ChinaPostJT/page/2012680921.jpg"
               width="100%" lt="">
       </div>
   </div>
   <div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide"
       aria-controls="swiper-wrapper-ef27d4fa61cece910" aria-disabled="false"></div>
   <div id="hhk" class="swiper-button-prev swiper-button-disabled" tabindex="-1" role="button"
       aria-label="Previous slide" aria-controls="swiper-wrapper-ef27d4fa61cece910" aria-disabled="true"></div>
   <div class="swiper-pagination swiper-pagination-bullets swiper-pagination-horizontal"><span
           class="swiper-pagination-bullet swiper-pagination-bullet-active" aria-current="true"></span><span
           class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span
           class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span
           class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span
           class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span></div>
   <span class="swiper-notification" aria-live="assertive" aria-atomic="true">></span>
</div>
<div style="margin:auto; width: 1200px;"><img src="./img/9.png" width="1200px"  alt=""></div>

<div style="width: 1200px;height: 400px; margin: auto;">
    <div style="width: 500px;float: left;"><img src="./img/3.png"width="500px" alt=""></div>
    <div style="width: 500px;float: left;margin-top: -80px; margin-left: 30px;"><div class='tab'>
        <div class='tab_list'>
            <ul>
                <li class='current'>集团要闻</li>
                <li>综合新闻</li>
                <li>媒体聚焦</li>
                <li>一线风采</li>
            </ul>
        </div>
    <div class='tab_con'>
        <div class="item one" style='display:block'><img src="./img/6.png" width="560px" alt=""></div>
        <div class="item two"><img src="./img/11.png" width="560px" alt=""></div>
        <div class="item fou"><img src="./img/8.png" alt="" width="560px"></div>
        <div class="item fiv"><img src="./img/11.png" alt="" width="560px"></div>
    </div>
</div></div>
</div>

<div style="width: 1200px; margin: auto;">
    <div style="width: 500px;float: left;"><img src="./img/1.png"width="500px" alt=""></div>
    <div style="width: 500px;float: left;margin-top: -80px; margin-left: 30px;"><div class='tab'>
        <div class='tab_list'>
            <ul>
                <li class='current'>集团要闻</li>
                <li>综合新闻</li>
                <li>媒体聚焦</li>
                <li>一线风采</li>
            </ul>
        </div>
    <div class='tab_con'>
        <div class="item one" style='display:block'><img src="./img/6.png" width="560px" alt=""></div>
        <div class="item two"><img src="./img/11.png" width="560px" alt=""></div>
        <div class="item fou"><img src="./img/8.png" alt="" width="560px"></div>
        <div class="item fiv"><img src="./img/11.png" alt="" width="560px"></div>
    </div>
</div></div>
</div>
<div style="width: 1200px;margin: auto;">
    <img src="./img/2.png" width="1200px" alt="">
    <div style="float: left;width: 600px;">  <div id="box_one" style="width:600px; height: 700px;"></div></div>
    <div style="float: left;width: 400px;margin-left: 200px;margin-top: 30px;"><b>邮政业务:</b><span style="padding-left: 50px;color: green;">1185</span>
        <br>
        <br>
        <b style="padding-top: 30px
        ;">邮储银行:</b><span style="padding-left: 50px;color: green;">1185</span><br>
        <br>
        <b style="padding-top: 30px
        ;">速递物流:</b><span style="padding-left: 50px;color: green;">1185</span><br>
        <br>
        <b style="padding-top: 30px
        ;">中邮保险:</b><span style="padding-left: 50px;color: green;">1185</span><br>
        <br>
        <b style="padding-top: 30px
        ;">中邮证券:</b><span style="padding-left: 50px;color: green;">1185</span><br>
        <br>
     <button style="width: 170px;height: 60px; text-align: center;line-height: 40px;background: green;color: #fff;font-size: 30px;">举报专区</button>  
<div><img src="./img/1.png"width="300px" alt=""></div>
    </div>
</div>
<img src="./img/5.png" width="100%" alt="">
<script>
        var swiper = new Swiper(".mySwiper", {
        cssMode: true,
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
        pagination: {
            el: ".swiper-pagination",
        },
        autoplay: {
            delay: 3000,
        },
        mousewheel: true,
        keyboard: true,
    });

    var tab_list = document.querySelector('.tab_list');
     var lis = tab_list.querySelectorAll('li');
     var items = document.querySelectorAll('.item');
     //for 循环绑定点击事件
     for(var i=0;i < lis.length;i++){
         lis[i].setAttribute('index',i);
        lis[i].onmouseover  = function() {
             for(var i=0;i < lis.length;i++){
                 lis[i].className = '';
             }
             this.className = 'current';
             var index = this.getAttribute('index');
             for(var i=0;i<items.length;i++){
                 items[i].style.display='none';
             }
             items[index].style.display = 'block';
         }
     }


     var arr = echarts.init(document.getElementById('box_one'));
window.dataList = [{
        name: "南海诸岛",
        value: 0
    },
    {
        name: '北京',
        value: 54
    },
    {
        name: '天津',
        value: 13
    },
    {
        name: '上海',
        value: 40
    },
    {
        name: '重庆',
        value: 75
    },
    {
        name: '河北',
        value: 13
    },
    {
        name: '河南',
        value: 83
    },
    {
        name: '云南',
        value: 11
    },
    {
        name: '辽宁',
        value: 19
    },
    {
        name: '黑龙江',
        value: 15
    },
    {
        name: '湖南',
        value: 69
    },
    {
        name: '安徽',
        value: 60
    },
    {
        name: '山东',
        value: 39
    },
    {
        name: '新疆',
        value: 4
    },
    {
        name: '江苏',
        value: 31
    },
    {
        name: '浙江',
        value: 104
    },
    {
        name: '江西',
        value: 36
    },
    {
        name: '湖北',
        value: 1052
    },
    {
        name: '广西',
        value: 33
    },
    {
        name: '甘肃',
        value: 7
    },
    {
        name: '山西',
        value: 9
    },
    {
        name: '内蒙古',
        value: 7
    },
    {
        name: '陕西',
        value: 22
    },
    {
        name: '吉林',
        value: 4
    },
    {
        name: '福建',
        value: 18
    },
    {
        name: '贵州',
        value: 5
    },
    {
        name: '广东',
        value: 98
    },
    {
        name: '青海',
        value: 1
    },
    {
        name: '西藏',
        value: 0
    },
    {
        name: '四川',
        value: 44
    },
    {
        name: '宁夏',
        value: 4
    },
    {
        name: '海南',
        value: 22
    },
    {
        name: '台湾',
        value: 3
    },
    {
        name: '香港',
        value: 5
    },
    {
        name: '澳门',
        value: 5 
    }
];
console.log(111);
add = {
    tooltip: {
        triggerOn: "mousemove",
        formatter: function (e, t, n) {
            return .5 == e.value ? e.name + "ms" : e.seriesName + "<br/>" + e.name + ":" + e.value
        }
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 26,
        bottom: 40,
        showLabel: !0,
        text: [],
        pieces: [{
           
           
            color: "green"
        }, {
 
           
            color: "green"
        }, {
       
      
           
            color: "green"
        }, {
        
         
            color: "green"
        }, {
           
            color: "green"
        }],
        show: !0
    },
    geo: {
        map: "china",
        roam: !1,
        scaleLimit: {
            min: 1,
            max: 2
        },
        zoom: 1.23,
        top: 120,
        label: {
            normal: {
                show: !0,
                fontSize: "14",
                color: "rgba(0,0,0,0.7)"
            }
        },
        itemStyle: {
            normal: {
                borderColor: "rgba(0, 0, 0, 0.2)"
            },
            emphasis: {
                areaColor: "yellow",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                borderWidth: 0
            }
        }
    },
    series: [{
        name: "ms",
        type: "map",
        geoIndex: 0,
        data: window.dataList
    }]
};
arr.setOption(add);
</script>

</html>